What is CSS
- CSS, which stands for Cascading Style Sheets, is a language used to control the presentation of HTML elements on a webpage.
- It allows users to define how HTML content is displayed, making it easier to format and style web pages.
- CSS can manage various aspects of a webpage, such as text color, font styles, and paragraph spacing, among other things.
- While CSS is straightforward to learn, it offers powerful control over HTML documents.
Advantage of CSS
Faster Page Speed:
CSS can enhance page speed by applying consistent styles across all
occurrences of specific tags in HTML documents, making it more efficient
than other methods.
Better User Experience:
CSS makes webpages visually appealing and user-friendly. Proper formatting
of buttons and text improves the overall user experience.
Quicker Development Time:
CSS allows you to define the style and format for multiple pages with a
single code string. This means you can replicate the look and feel of one
webpage across several pages easily.
Easy Formatting Changes:
Modifying the format in CSS is simple—changing the style on one page
automatically updates the format across all linked pages. There’s no need to
manually adjust individual pages.
Compatibility:
In today's digital environment, compatibility is crucial. CSS, when used
with HTML, ensures that webpages are both responsive and user-friendly.
Why do we use CSS?
CSS is a powerful language used to style and control the design of HTML
documents, enhancing the appearance of webpages.
Example
<!DOCTYPE
html>
<html>
<head>
<style>
body {
background-color:
Aqua;
}
h1 {
color:
black;
text-align: center;
}
p {
font-family:
Verdana, sans-serif;
font-size:
20px;
}
</style>
</head>
<body>
<h1>HELLO FRIENDS</h1>
<p>This is a
paragraph.</p>
</body>
</html>
Output
.png)
Types of CSS
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS styles HTML elements directly by applying styles within the
HTML attributes, without using selectors. Although it can be more
difficult to manage than other methods, it is useful in certain
situations.
Example
<p style="color: orange;
font-size: 20px;">Here is my first
paragraph.</p>
<p>Here is my second
paragraph.</p>
Internal CSS
Internal CSS is used to style just one page at a time. It can take more
time because you need to style each page separately. With internal CSS,
each page has its own unique style.
Syntax
<style>
/* Write your styles below */
</style>
Example
<!DOCTYPE
html>
<html>
<head>
<style>
body{
background-color: black;
}
h2{
color:
mediumvioletred;
}
h3{
color:
powderblue;
}
</style>
</head>
<body>
<h2>Welcome!!</h2>
<h3>Good Morning!</h3>
</body>
</html>
Output
.png)
External CSS
External CSS links all webpages to a separate file, which is created as a
text document. This method is more efficient for styling large websites
and makes the CSS files easier to read.
Syntax
<head>
<!-- If the CSS file is in another folder, provide the path to
the file -->
<link rel="stylesheet"
href="path/to/nameOfTheSheet.css">
</head>
How does CSS Work
The <h1></h1> tags in HTML create a header, but CSS makes it
look more attractive.
Example
<h1>
THIS IS A FIRST HEADING
</h1>
CSS Comment
CSS comments allow you to add notes in your code to help others understand
it better. They can also make your source code more organized and
readable.
Example
/* This is a single-line comment */
p {
color:
blue;
}
Selectors
In CSS, selectors are used to choose the specific elements you want to
style. There are various types of selectors:
- Element Selector
- Universal Selector
- ID Selector
- Class Selector
Element Selector
Targets HTML elements by their name.
Syntax
element {
property:
value;
}
Example
h1 {
background-color: red;
}
Universal Selector
Affects all elements on the page.
Example
* {
property:
value;
}
ID Selector
Targets a specific element with a unique ID.
Syntax
#id {
property:
value;
}
Example
<!DOCTYPE
html>
<html>
<head>
<!-- CSS property using id attribute -->
<style>
#first{
colour:
red;
text-align: center;
}
#second{
text-align:
center;
color:
black;
}
</style>
</head>
<body>
<!-- id attribute declares here -->
<h1 id="first">First
Heading</h1>
<h2 id="second">Second
Heading</h2>
</body>
</html>
Class Selector
Applies styles to elements with a particular class name.
Example
.classname{
background-color:
yellow;
}
CSS Colors
In CSS, there are several ways to apply colors. The three most
commonly used methods are:
RGB
RGB is a color model that combines red, green, and blue. It uses three
parameters, each ranging from 0 to 255
Example
RGB(255, 0, 0)
Hexadecimal
Hex is a code that starts with # and consists of 6 characters, divided
into 3 pairs. Each pair represents the intensity of red, green, and
blue, ranging from 00 to FF.
RGBA
RGBA uses four parameters: red, green, blue, and alpha. The first
three parameters range from 0 to 255, while the alpha value ranges
from 0 to 1.
CSS background
In CSS, there are various methods to style HTML documents. Some of the
key ones include:
Color
Used to change the color of the text or background.
Repeat
Specifies whether and how an image should repeat.
Image
Sets an image as the background.
Position
Determines the placement of an image in the background.
CSS Border
It is used to set the border for HTML elements.We can set the border
on the right, top, bottom, and left sides. Here are some key
properties for setting up borders in HTML elements:
Width
Sets the thickness of the borders.
Style
Defines the style of the borders.
Color
Specifies the color of the borders.
Radius
Defines the curvature of the border corners.
Example
border-width:
5px 10px;
.png&description=CSS SYNTAX ){kind=link}